<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用户注册</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<section class="w3l-login">
    <div class="overlay">
        <div class="wrapper">
            <div class="logo">
                <a class="brand-logo" href="/static/css/style.css">人脸情绪识别系统</a>
            </div>
            <div class="form-section">
                <h3>注册新账户</h3>
                <h6>创建你的专属账户</h6>
                <!-- 在注册页面顶部添加成功提示 -->
                {% if success %}
                <div class="success-message"
                     style="color: green; border: 1px solid #ccffcc; padding: 15px; margin-bottom: 20px;">
                    注册成功！请前往<a href="/login">登录页面</a>
                </div>
                {% endif %}

                <!-- 全局错误提示 -->
                {% if error %}
                <div class="error-message">{{ error }}</div>
                {% endif %}

                <form action="/reload" method="post" class="signin-form">
                    <div class="form-input">
                        <input type="text" name="username" id="username" placeholder="用户名" required autofocus>
                        <div id="username-exist-error" style="color: red; display: none;">用户名已存在，请更换</div>
                    </div>
                    <div class="form-input" style="display: flex; align-items: center; gap: 8px;">
                        <input type="text" name="phone" id="phone" placeholder="手机号" style="flex:1;" required>
                        <button type="button" id="send-sms-btn" style="padding: 6px 14px; font-size: 13px; height: 38px; line-height: 1;">获取验证码</button>
                    </div>
                    <div id="phone-exist-error" style="color: red; display: none; margin-bottom: 8px;">手机号已注册，请更换</div>
                    <div class="form-input">
                        <input type="text" name="sms_code" placeholder="短信验证码" required>
                    </div>
                    <div class="form-input">
                        <input type="password" name="password" placeholder="设置密码" required>
                    </div>
                    <div class="form-input">
                        <input type="password" name="confirm_password" placeholder="确认密码" required>
                    </div>
                    <!-- 密码不一致错误提示 -->
                    <div class="password-error" style="color: red; display: none;">
                        两次密码输入不一致，请重新输入
                    </div>
                    <button type="submit" class="btn btn-primary theme-button mt-4">注册</button>
                </form>

            </div>
        </div>
    </div>
    <div class="copy-right">
        <p>&copy; 2025 人脸情绪识别系统. 保留所有权利</p>
    </div>
</section>

<script>
    // 前端密码一致性验证
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('.signin-form');
        const passwordInput = document.querySelector('input[name="password"]');
        const confirmInput = document.querySelector('input[name="confirm_password"]');
        const errorDiv = document.querySelector('.password-error');
        const usernameInput = document.getElementById('username');
        const usernameErrorDiv = document.getElementById('username-exist-error');
        const phoneInput = document.getElementById('phone');
        const sendSmsBtn = document.getElementById('send-sms-btn');
        const phoneErrorDiv = document.getElementById('phone-exist-error');

        // 实时检查密码一致性（输入时反馈）
        function checkPasswordMatch() {
            if (passwordInput.value && confirmInput.value && passwordInput.value !== confirmInput.value) {
                errorDiv.style.display = 'block';
                return false;
            } else {
                errorDiv.style.display = 'none';
                return true;
            }
        }

        // 输入时触发检查
        passwordInput.addEventListener('input', checkPasswordMatch);
        confirmInput.addEventListener('input', checkPasswordMatch);

        // 用户名实时校验
        usernameInput.addEventListener('input', function () {
            const username = usernameInput.value.trim();
            if (!username) {
                usernameErrorDiv.style.display = 'none';
                return;
            }
            fetch(`/check_username?username=${encodeURIComponent(username)}`)
                .then(res => res.json())
                .then(data => {
                    if (data.exists) {
                        usernameErrorDiv.style.display = 'block';
                    } else {
                        usernameErrorDiv.style.display = 'none';
                    }
                });
        });

        // 手机号实时校验
        phoneInput.addEventListener('input', function () {
            const phone = phoneInput.value.trim();
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                phoneErrorDiv.style.display = 'none';
                return;
            }
            fetch(`/check_phone?phone=${encodeURIComponent(phone)}`)
                .then(res => res.json())
                .then(data => {
                    if (data.exists) {
                        phoneErrorDiv.style.display = 'block';
                    } else {
                        phoneErrorDiv.style.display = 'none';
                    }
                });
        });

        // 发送短信验证码
        if (sendSmsBtn) {
            sendSmsBtn.onclick = function() {
                var phone = phoneInput.value.trim();
                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入正确的手机号');
                    return;
                }
                fetch('/send_sms_code?phone=' + encodeURIComponent(phone))
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            alert('验证码已发送');
                        } else {
                            alert('发送失败：' + data.msg);
                        }
                    });
            };
        }

        // 提交时最终验证
        form.addEventListener('submit', function (e) {
            if (!checkPasswordMatch()) {
                e.preventDefault(); // 阻止表单提交
                errorDiv.textContent = "两次密码输入不一致，请修改后重试"; // 明确错误提示
            }
            // 用户名存在时禁止提交
            if (usernameErrorDiv.style.display === 'block') {
                e.preventDefault();
            }
            // 提交时手机号存在禁止提交
            if (phoneErrorDiv.style.display === 'block') {
                e.preventDefault();
            }
        });
    });
</script>
</body>
</html>